<template>
	<view class="face-result-page">
		<!-- 顶部返回按钮 -->
		<view class="nav-bar">
			<view class="back-icon" @tap="goBack">
				<text class="iconfont icon-back"></text>
			</view>
		</view>

		<!-- 面容分析图 -->
		<view class="face-analysis">
			<image class="face-img" src="https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/042b32163530a848eca7810c5d102e9206image.png"></image>

			<!-- 标签布局 -->
			<view class="label label-1">混油皮</view>
			<view class="label label-2">淡眉</view>
			<view class="label label-3">塌鼻</view>
			<view class="label label-4">肿眼泡</view>
			<view class="label label-5">标准唇</view>
			<view class="label label-6">方圆脸</view>
		</view>

		<!-- 面容分析报告区域 -->
		<view class="result-card">
			<view class="result-title">面容分析报告</view>
			<pre class="result-content">
				脸型：方脸、圆脸、椭圆脸等
				肤色：白皙、小麦色、黝黑等
				眼形：杏仁眼、丹凤眼、圆眼等
				眼色：黑色、棕色、蓝色等
				特征：双眼皮、单眼皮、内双等
				眉毛：剑眉、柳叶眉、弧眉等
				浓度：浓眉、淡眉
				鼻子：高挺、塌鼻梁
				形状：鹰钩鼻、蒜头鼻等
				……
			</pre>
		</view>
	</view>
</template>

<script setup>
const goBack = () => {
	uni.navigateBack();
};
</script>

<style scoped lang="scss">
.face-result-page {
	padding-top: var(--status-bar-height);
	background: linear-gradient(to bottom, #ffdae6, #e9d5ff, #fff3ca);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nav-bar {
	width: 100%;
	padding: 20rpx 30rpx;
	.back-icon {
		font-size: 44rpx;
		color: #333;
	}
}

.face-analysis {
	position: relative;
	margin-top: 20rpx;
	.face-img {
		width: 500rpx;
		height: 650rpx;
	}

	.label {
		position: absolute;
		padding: 8rpx 20rpx;
		background: #ffdae6;
		border-radius: 30rpx;
		font-size: 24rpx;
		color: #333;
		box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.1);
	}

	.label-1 { top: 50rpx; left: -40rpx; }
	.label-2 { top: 70rpx; right: -40rpx; }
	.label-3 { top: 140rpx; left: -50rpx; }
	.label-4 { top: 160rpx; right: -50rpx; }
	.label-5 { top: 220rpx; left: -40rpx; }
	.label-6 { bottom: 30rpx; right: -40rpx; }
}

.result-card {
	width: 85%;
	margin-top: 60rpx;
	padding: 30rpx;
	height: 700rpx;
	background-color: #fff;
	border-radius: 30rpx;
	box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.1);

	.result-title {
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}

	.result-content {
		font-size: 28rpx;
		line-height: 48rpx;
		color: #666;
		white-space: pre-line;
	}
}
</style>
